<template>
  <div>
  	
    <el-cascader
    				:value="newValue"
    				:placeholder="list"
            :disabled="disabled"
            size="small"
            :options="provinceList"
            @active-item-change="handleAreaChange"
            :props="areaProps"
            @change="change">
    </el-cascader>
  </div>
</template>

<script>
    import axios from '~plugins/axios';
    import * as types from '~/store/mutation-types/customer/index';
    import Vue from 'vue'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import {Cascader} from 'element-ui';
    Vue.use(Cascader);
    export default {
        data () {

            return {
            		newValue:[],
                cityList:[],
								diqu:"请选择",
                areaProps: {
                    value: 'value',
                    label:'label',
                    level:'level',
                    children: 'children'
                },
            }
        },
        props:{
            disabled :{
                default: false
            },
            value:{
            	default:[]
            }
        },

        methods: {

            change(val){
                this.$parent.$parent.$parent.$parent.$parent['getCityId'](val)
            },

            filter(val){
                return val.value == this.filterValue;
            },

            handleAreaChange(val) {
                if(!val[1]){
                    this.$store.dispatch('getAllCityList',{provinceId:val[0]}).then((ret)=>{
                        let index = 0;
                        this.provinceList.forEach((n,i)=>{
                            if(n.value == val[0]){
                                index = i;
                                return;
                            }
                        });
                        this.provinceList[index].children = ret.data.data;
                        var list  = this.provinceList[index].children;
                        var arrSing = [820100,820200];
					
                        list.forEach((n,i)=>{
                            if(!(arrSing.indexOf(n.value)>-1)){
                                n.children = [];
                            }
                            
                            this.$store.dispatch('getAllDistrictList',{cityId:n.value}).then((ret)=>{
                            		
                                var arr = ret.data.data;
                                if(arr.length>0){
                                    n.children = ret.data.data;
                                }else{
                                   delete n.children;
                                }
                                if(i>=list.length-1){
                                    this.newValue = this.value;
                                }
                            });
                        });
                        
                  });
                }
            },
        },
        computed: {
            ...mapGetters({
                'provinceList': 'getProvinceList'
            }),
            list(){
            	let list = [this.value[0]];
            	if(list[0]){
            		this.handleAreaChange(list);
            	}
        			
        			return '请选择';
            }
        },
        created(){
        	
        }
    }
</script>

<style>
  .el-cascader {width: 100%}
</style>